<template>


    <div class="shopcart-container">
       <!-- 收货地址区域 -->

  <div class="address-container">

    <router-link :to="{name: 'address_select'}" replace>

      <h3>{{ address.name }} {{ address.tel }}</h3>
    
      <p>{{ address.area }} {{ address.detail }}</p>
    
    </router-link>

  </div>
  
      <!-- 商品列表 -->
  
      <div class="goods-list">
  
        <!-- 商品列表项区域 -->
  
        <div class="mui-card">
  
          <div class="mui-card-content" v-for="(item) in goodslist" :key="item.id">
  
            <div class="mui-card-content-inner flex">
  
              <img :src="item.image">
  
              <div class="info">
  
                <h1>{{ item.name }}</h1>
  
                <p class="flex">
  
                  <span class="price">¥{{ item.price }}</span>
  
                  <span>x{{ item.count }}</span>
  
                </p>
  
              </div>
  
            </div>
  
          </div>
  
          <!-- 配送信息 -->
  
          <div class="process-info">
  
            <p>
  
              <strong>配送服务</strong>
  
              <strong>快递运输</strong>
  
            </p>
  
            <p>
  
              <span>中小件送货时间</span>
  
              <span>工作日、双休日与节假日均可送货</span>
  
            </p>
  
          </div>
  
          <!-- 订单备注 -->
  
          <div class="store-info">
  
            <strong>订单备注</strong>
  
            <textarea v-model="note" type="text" placeholder="选填，给商家留言"></textarea>
  
          </div>
  
        </div>
  
      </div>
  
      <!-- 运费信息 -->
  
      <ul class="fare-info mui-card">
  
        <li class="fare-price flex">
  
          <span>商品金额</span>
  
          <span class="red">¥{{ amount.toFixed(2) }}</span>
  
        </li>
  
        <li class="fare-price flex">
  
          <span>运费</span>
  
          <span class="red">¥0.00</span>
  
        </li>
  
        <li class="fare-price flex">
  
          <span><strong>总价</strong></span>
  
          <span class="red">¥{{ amount.toFixed(2) }}</span>
  
        </li>
  
        <!-- 创建订单按钮 -->
  
        <div class="flex">
  
          <button class="mui-btn mui-btn-primary mui-btn-block" @click="order">创建订单</button>
  
        </div>
  
      </ul>
  
    </div>
  
  </template>
  <script>

  import { mapState } from 'vuex'
  import { mapGetters } from 'vuex'

  export default {
    data () {

return {

  goodslist: [],
  amount: 0,
  note: '',
  address: {},
  addressId: 0

}

},

  computed: {

    ...mapState('shopcart', ['buy']),
    ...mapGetters('shopcart', ['getBuy'])

  },

    created() {
    if (this.$route.params.id) {

    this.addressId = this.$route.params.id

  }

    this.getGoodsList(),
    this.getAddress()


  },

  methods: {
    getGoodsList () {

var idArr = []

this.buy.forEach(item => idArr.push(item.id))

if (idArr.length <= 0) {

  return

}

this.$indicator.open({

  text: '加载中'

})

var params = { ids: idArr }

this.$http.get('shopcart', { params: params }).then(res => {

  this.$indicator.close()
  if (res.data.code === 1) {

    this.goodslist = res.data.data
    var amount = 0

this.goodslist.forEach(item => {

  item.count = this.getBuy[item.id].count

  amount += item.count * item.price

})

this.amount = amount

}


 

})

    },
    getAddress () {

      var params = { id:  this.addressId }

this.$http.get('address/def', { params: params }).then(res => {
  if (res.data.code === 0) {

this.$toast(res.data.msg)

} else if (res.data.code === 1) {

if (res.data.data) {

  this.address = res.data.data
  this.addressId = res.data.data.id

} else {

  this.$toast('请先添加收货地址')
  this.$router.replace({ name: 'address_select' })

}

} else if (res.data.code === 2) {

this.$router.push({ name: 'login' })

}

})

    },
    order () {

var form = {

  address: this.addressId,

  goods: this.buy,

  note: this.note

}

this.$indicator.open({

  text: '创建订单中'

})

this.$http.post('order/create', form).then(res => {

  this.$indicator.close()
  if (res.data.code === 0) {

this.$toast(res.data.msg)

} else if (res.data.code === 1) {

this.$toast(res.data.msg)

this.$router.replace({ name: 'order_list' })

} else if (res.data.code === 2) {

this.$router.push({ name: 'login' })

}

})

}
    
  }

}

</script>
<style lang="scss" scoped>

.flex {

    display: flex;

}

.shopcart-container {

  background: #eee;

  overflow: hidden;

  // 商品列表

  .goods-list {

    margin-top: 10px;

    .mui-card {

      margin: 0;

      .mui-card-content {

        border-bottom: 1px solid #eee;

        .mui-card-content-inner {

          align-items: center;

          padding: 10px;

          img {

            width: 60px;

          }

          .info {

            margin-left: 10px;

            box-sizing: border-box;

            width: 100%;

            overflow: hidden;

            h1 {

              font-size: 13px;

              font-weight: bold;

              line-height: 20px;

              padding-top: 22px;

            }

            p {

              flex-direction: row;

              align-items: center;

              justify-content: space-between;

              .price {

                font-size: 16px;

                font-weight: 700;

                color: red;

                flex: 1

              }

            }

          }

        }

      }

      // 配送信息

      .process-info {

        padding: 10px;

        border-bottom: 1px solid #eee;

        p {

          display: flex;

          flex-direction: row;

          align-items: center;

          justify-content: space-between;

          color: #333;

          span {

            color:#999

          }

        }

      }

       // 店铺备注

      .store-info {

        padding: 10px;

        textarea {

          font-size: 13px;

        }

      }

    }

  }

  // 运费信息

  .fare-info {

    padding: 10px;

    margin: 10px 0 0 0;

    .fare-price {

      padding: 5px 0;

      display: flex;

      justify-content: space-between;

      .red {

        color: red;

        font-size: 16px;

      }

    }

  }
  .address-container {

    .mui-card {

      margin: 0;

      padding: 10px;

      h3 {

        color: #333;

        font-size: 16px;

        font-weight: bold;

      }

    }

  }

}

</style>